<template>
  <div class="sm-sman-smanagementBGoods">
    <div class="sm-sman-leftInfo">
      <ul>
        <li v-for="(value, index) in TheGzbInfo" :class="{'active':activeAo==index}" :key="index" ref="smgBgoodsLi">
          <p>
            AO编号：<span style="margin-left: 3px">{{ value.AO_CODE }}</span>
          </p>
        </li>
      </ul>
    </div>
    <!--补叫缓存箱界面-->
    <el-drawer title="补叫缓存箱" size="75%" :visible.sync="drawer.drawer" :direction="drawer.direction" :before-close="handleClose">
      <el-row>
        <el-col :span="6">
          <slot>工作包信息</slot>
          <el-tree :data="drawer.treeData" :props="drawer.defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-col>
        <el-col :span="18">
          <slot>补叫箱子列表</slot>
          <div>
            <el-button class="btn-width" size="mini" type="primary" @click="addEmptyToolTask" >补叫空托盘</el-button>
            <el-button class="btn-width" size="mini" type="primary" @click="addWorkbinTask" >缓存箱出库</el-button>
          </div>
          
          <el-table  ref="receiveTable" size="mini" border :data="table.resData"  height="550"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="workbinCode" sortable label="箱子号" width="100"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="itemQty" sortable label="数量" width="100"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="itemCode" sortable label="图号" width="160"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="qualityCode" sortable label="质量编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="itemName" sortable label="图号名称" width="150" :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="itemType" sortable label="物料类型" width="150" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="roadway" sortable label="巷道" :show-overflow-tooltip="true"> </el-table-column>
            
          </el-table>
          <!-- 分页 -->
          <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="table.page.pageNumber" :page-sizes="[10,20,50,100]"
              :page-size="table.page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="table.page.totalCount">
          </el-pagination>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>
<script>
import request from "@/utils/request.js";
export default {
  name: "SortingManagementBGoods",
  data() {
    return {
      hcxInfo: "",
      TheGzbInfo: [],
      qqlist: [],
      num:'',
      indexNumber:'',
      nowMaterial:'',
      newGzbList:[],
      activeAo:0,
    //   isMaterial:'未确认',
      backgroundColorList:["color1","color2","color3"],
      drawer:{
        drawer: false,
        direction: 'rtl',
        defaultProps:{children: 'children',label: 'label'},
        treeData:[]
      },
      table:{
        multipleSelection:[],//复选框勾选的数据
        resData:[],//表格数据
        page:{//分页参数
          pageSize:50,
          totalCount:0,
          pageNumber:0
        }
      }
    };
  },
  methods: {
    //关闭遮罩层
    handleClose(done){
      done();
    },
    handleNodeClick(data) {
        console.log("treeNode",data);
        request.post("/materialReceipt/usableWorkbinQuery",{"searchParams":data,"pageParameter":this.table.page}).then((res)=>{
          console.log("query res",res);
          this.table.resData = res.data.retData;
        });
    },
    handleSelectionChange(val) {
      if(val.length>1){
          this.$refs.receiveTable.clearSelection();
          var array = val.pop();
          this.$refs.receiveTable.toggleRowSelection(array);
          this.table.multipleSelection = array;
      }else{
          this.table.multipleSelection = val;
      }
    //  this.$bus.$emit("rigthTableData",this.multipleSelection);
    },
    handleSizeChange(val){
      this.table.page.pageSize = val;
    },
    handleCurrentChange(val){
      this.table.page.pageNumber = val;
    },
    addEmptyToolTask(){//补叫空托盘
      request.post("/materialReceipt/reCalToolTask",{}).then((res)=>{
        if(res.data.retCode=="200"){
          this.$Alert({title: "成功", message: res.data.retMsg,type: "success"});
        }else{
          this.$Alert({title: "失败", message: res.data.retMsg,type: "error"});
        }
        
      });
    },
    addWorkbinTask(){
      if(this.table.multipleSelection.length==0){
        this.$Alert({title: "失败", message: "请至少选择一条数据！",type: "error"});
        return ;
      }
      request.post("/materialReceipt/reCallWorkbinTask",this.table.multipleSelection[0]).then((res)=>{
        if(res.data.retCode=="200"){
          this.$Alert({title: "成功", message: res.data.retMsg,type: "success"});
        }else{
          this.$Alert({title: "失败", message: res.data.retMsg,type: "error"});
        }
      });
    }
  },
  mounted() {
    //yebo 新增 初始化AO
    this.$bus.$on('initAoInfo',(e)=>{
        this.TheGzbInfo = [];
        if(e==null||e.length==0){
          return ;
        }
        for(var i=0;i<e.length;i++){
          this.TheGzbInfo.push(e[i]);
    
        }

    }),
    //添加补叫按钮实现的方法
    this.$bus.$on("clickAddHcxViewBtn",(e)=>{
      this.drawer.drawer = true;
      if(this.TheGzbInfo.length>0){
        var curGzbAo = this.TheGzbInfo[0];
        request.post("/materialReceipt/queryGzbMaterialTree",curGzbAo).then((res)=>{
          var tree = [];
          tree.push(res.data);
          this.drawer.treeData = tree;
        });
      };
    })

    // 工作包回库后 更新AO列表 并高亮对应AO
      this.$bus.$on('sotmgGzbBackBinfo',(e)=>{
        this.$nextTick(()=>{

        })
      })
    }
    

}
</script>
<style scoped>
.sm-sman-smanagementBGoods {
  width: 100%;
  height: 100%;
}
.sm-sman-leftInfo {
  float: left;
  width: 100%;
  height: 100%;
  display: black;
  font-size: 0.8em;
  padding:3px 0;
  /* height: 300px; */
  /* border: 1px solid black; */
  /* background: #3375d7; */
}
.sm-sman-leftInfo ul {
  display: flex;
  overflow-y: hidden;
  height: 100%;
}
.sm-sman-leftInfo ul li {
  flex: none;
  /* float: left; */
  /* padding: 0 10px; */
  /* width: 31%; */
  /*width: 260px;*/
  height: 20%;
  /* background-color: rgb(200, 244, 244); */
  background-color: #ffffff;
  /* background: #ffffff; */
  border: 1px solid #cccbcb;
  border-radius: 10%;
  /* box-shadow: inset 0px 0px 20px 0px #cccbcb; */
  margin-left: 3px;
  margin-top: 2px;
  /* text-align: center; */
}
/* .sm-sman-leftInfo ul li p:nth-child(1) {
  text-align: center;
} */
.sm-sman-leftInfo ul li p {
  padding: 10px;
  width: calc(100% - 4px);
}
/**
* yebo 新增高亮样式
*/
.active{
  background-color: rgb(140, 203, 255)!important;
  color:white;
}
</style>